<template>
  <view class="user_">
    <ls-skeleton
      :skeleton="skeleton"
      :round="true"
      :loading="loading"
      :animate="true"
    >
      <view>
        <view class="header_wrapper">
          <image
            src="/static/user/top.png"
          ></image>
          <view class="header_info_">
            <view class="header_top_" @click="head_login">
              <view class="img_">
                <image
                 
                  src="https://img2.baidu.com/it/u=1963855021,587266605&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1687453200&t=6e9885ba4fa8e19869d873eab8222cc1"
                ></image>
                <!-- <image v-if="userInfoServer && token" :src="avatarUrl"></image> -->
              </view>
              <view class="header_name">
                <view class="name_" v-if="!mobile">请点击登录!</view>
                <view class="name_" v-if=" mobile">
                  <view class="nickname_">{{ mobile }} </view>
                  <view class="grade_">
                    <!-- <image src="/static/user/4.png"></image> -->
                   <!-- <text>
                      {{
                        userInfoServer.roleId === 1
                          ? "联创"
                          : userInfoServer.roleId === 2
                          ? "合伙人"
                          : userInfoServer.roleId === 3
                          ? "服务商"
                          : userInfoServer.roleId === 4
                          ? "店主"
                          : userInfoServer.roleId === 5
                          ? "普通用户"
                          : ""
                      }}
                    </text> -->
					<view class="outlogin" @click="outlogin">
						退出登录
					</view>
                  </view>
				  
				 
                </view>
                <view class="grade_wrapper" v-if="userInfoServer && token">
                  <view class="id_"> ID:{{ userInfoServer.userId }} </view>
                </view>
              </view>
            </view>
          <!--  <view class="header_number_">
              <view
                class="item_"
                v-for="(item, index) in headerNumber"
                :key="index"
                @tap.stop="moduleFn(item)"
              >
                
				<img v-if="item.num==1" src="/static/user/commission-01.png" alt="">
				<img v-if="item.num==2" src="/static/user/commission-01.png" alt="">
                <text>{{ item.text }}</text>
              </view>
            </view> -->
          </view>
        </view>
        <view class="content_wrapper">
          <!--       我的订单   -->
          <view class="order-wrapper">
            <view class="order-hd flex">
              <view class="left">我的订单</view>
              <navigator
                class="right flex"
                hover-class="none"
                url="/pages/subpackage/order/index?status=0"
                open-type="navigate"
              >
                查看全部
                <text class="iconfont icon-xiangyou"></text>
              </navigator>
            </view>
			<!-- <view class="" @click="outlogin">
				退出登录 
			</view> -->
            <view class="order-bd">
              <block v-for="(item, index) in orderMenu" :key="index">
                <navigator
                  class="order-item"
                  hover-class="none"
                  :url="item.url"
                >
                  <view class="pic">
                    <image :src="item.img" mode=""></image>
                    <text class="order-status-num" v-if="item.num > 0">{{
                      item.num
                    }}</text>
                  </view>
                  <view class="txt">{{ item.title }}</view>
                </navigator>
              </block>
            </view>
          </view>
          <!--     轮播 -->
          <!-- 轮播 -->
          <view class="slider-wrapper" >
            <swiper
              indicator-dots="true"
              :autoplay="autoplay"
              :circular="circular"
              :indicator-dots="dotsToggle"
              :interval="interval"
              :duration="duration"
              indicator-color="rgba(255,255,255,0.6)"
              indicator-active-color="#fff"
            >
              <block>
				  <!-- @click="navito(item.url)" -->
                <swiper-item class="borRadius14">
                  <image
                    src="/static/user/hd.png"
                    class="slide-image"
                    
                  ></image>
                </swiper-item>
              </block>
            </swiper>
          </view>
          <!--    常用功能  -->
          <view class="function_">
            <view class="title_">常用功能</view>
            <view class="function_wrapper">
              <view
                class="item_"
                v-for="(item, index) in list"
                :key="index"
                @click="functionWrapper(item)"
              >
                <image :src="item.pic" />
                <text>{{ item.text }}</text>
              </view>
            </view>
          </view>
        </view>
        <AuthorizationPopup ref="authRef"></AuthorizationPopup>
      </view>
    </ls-skeleton>
  </view>
</template>

<script>
import AuthorizationPopup from "@/components/AuthorizationPopup";
import {
  getUserByIdApi,
  selCount,
  selCountUserCollect,
} from "@/api/login/login";
import { bannerList } from "@/api/banner";
import { BASE_URL_IMAHE } from "../../../utils/https";
export default {
  name: "index.vue",
  components: {
    AuthorizationPopup,
  },
  data() {
    return {
      avatarUrl:
        "https://img2.baidu.com/it/u=1963855021,587266605&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1687453200&t=6e9885ba4fa8e19869d873eab8222cc1",
      loading: true,
      skeleton: [
        "line-sm*3",
        40,
        "card",
        "circlesm*2",
        "line",
        "card-lg",
        40,
        "news",
        "line-sm*3+square",
      ],
      list: [
        
        {
          pic: "/static/user/address-01.png",
          url: "/pages/subpackage/addressManagement/index",
          text: "地址管理",
        },
        // {
        //   pic: "/static/user/fans-01.png",
        //   url: "/pages/subpackage/fanManagement/index",
        //   text: "粉丝管理",
        // },
        {
          pic: "/static/user/11.png",
          url: "/pages/subpackage/collect/index",
          text: "购物车",
        },
        {
          pic: "/static/user/9.png",
          url: "/pages/subpackage/service/index",
          text: "服务协议",
        },
		{
		  pic: "/static/user/message-01.png",
		  url: "/pages/subpackage/contact/index",
		  text: "联系我们",
		},
  //       {
  //         pic: "/static/user/assist.png",
  //         url: "/pages/subpackage/assist/index",
  //         text: "协助注册",
  //       },
		// {
		//   pic: "/static/user/9.png",
		//   url: "/pages/subpackage/bankcard/bankcard",
		//   text: "银行卡",
		// },
      ],
      imgUrls: [],
      //是否自动切换
      autoplay: true,
      //是否采用衔接滑动，即播放到末尾后重新回到开头
      circular: true,
      //是否显示面板指示点
      dotsToggle: false,
      //自动切换时间间隔
      interval: 3000,
      //滑动动画时长
      duration: 500,
      uid: "",
      orderMenu: [
        {
          img: "/static/user/5.png",
          title: "待付款",
          url: "/pages/subpackage/order/index?status=1",
          num: 0,
        },
        {
          img: "/static/user/6.png",
          title: "待发货",
          url: "/pages/subpackage/order/index?status=2",
          num: 0,
        },
        {
          img: "/static/user/7.png",
          title: "待收货",
          url: "/pages/subpackage/order/index?status=3",
          num: 0,
        },
        {
          img: "/static/user/8.png",
          title: "已完成",
          url: "/pages/subpackage/order/index?status=4",
          num: 0,
        },
      ],
      headerNumber: [
        {
          text: "购物车",
          num: 1,
        },
        // {
        //   text: "佣金",
        //   num: 0,
        // },
        {
          text: "收货地址",
          num: 2,
        },
      ],
      MyUserInfo: "",
      userInfoServer: "",
      token: "",
      //足迹
      footprintTotal: "",
	  mobile:''
    };
  },
  watch: {},
  //下拉刷新
  // onPullDownRefresh() {
  //   uni.showLoading({
  //     title: "正在刷新...",
  //   });
  // },
  onLoad() {
    this.bannerList();

  },
  onShow() {
    this.avatarUrl =
      uni.getStorageSync("avatarUrl") ||
      "https://img2.baidu.com/it/u=1963855021,587266605&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1687453200&t=6e9885ba4fa8e19869d873eab8222cc1";
    if (uni.getStorageSync("token")) {
      this.$refs.authRef.cancel();
    }
    // setTimeout(() => {
    //   if (!uni.getStorageSync("token") && !uni.getStorageSync("modal")) {
    //     //第一次进入弹窗
    //     this.$refs.authRef.showToggle();
    //     uni.setStorageSync("modal", true);
    //   }
    // }, 1000);

    this.token = uni.getStorageSync("token") ? uni.getStorageSync("token") : "";
    this.MyUserInfo = uni.getStorageSync("MyUserInfo")
      ? uni.getStorageSync("MyUserInfo")
      : "";
    this.userInfoServer = uni.getStorageSync("userInfoServer")
      ? uni.getStorageSync("userInfoServer")
      : "";
	uni.getStorageSync("mobile")?this.mobile=uni.getStorageSync("mobile"):this.mobile=''
    //佣金累计金额
    this.headerNumber[1].num =
      this.userInfoServer.frozenCapital + this.userInfoServer.usableMoney || 0;
    // this.userList();
    //足迹
    // this.footprint();
    //收藏
    // this.collect();
	// 防止重复弹窗
	// debugger
	if (!uni.getStorageSync("userId")) {
	  // 弹窗告诉用户去登录
	  uni.showModal({
	    title: "温馨提示",
	    content: "此时此刻需要您登录喔~",
	    // showCancel: false,
	    confirmText: "去登录",
	    cancelText: "再逛会",
	    success: (res) => {
	      if (res.confirm) {
	        uni.navigateTo({
	          url: "/pages/empower/mp-weixin",
	        });
	      }
	      if (res.cancel && getCurrentPages().length > 1) {
	        uni.navigateBack();
	      }
	      
	    },
	  });
	}
  },
  methods: {
	  outlogin(){
		uni.removeStorageSync("userId")  
		uni.removeStorageSync("mobile")  
	  },
    moduleFn(item) {
      console.log(item, "item");
      if (item.text === "足迹") {
        uni.navigateTo({
          url: "/pages/subpackage/my_footprint/index",
        });
      } else if (item.text === "购物车") {
        uni.navigateTo({
          url: "/pages/subpackage/collect/index",
        });
      } else if (item.text === "佣金") {
        uni.navigateTo({
          url: "/pages/subpackage/commission/index",
        });
      }
    },

    httpUrlFn(item) {
      return BASE_URL_IMAHE + item;
    },

    //banner图 列表
    async bannerList() {
		
		 setTimeout(()=>{
			  this.loading = false;
		 },500)
		 
		 // return
   //    const res = await bannerList(2);
   //    if (res.code === 0) {
   //      this.loading = false;
   //      this.imgUrls = res.data;
   //    }
    },

    async footprint() {
      const res = await selCount();
      console.log(res, "足迹");
      if (res.code === 0) {
        this.headerNumber[2].num = res.data || 0;
      }
    },

    async collect() {
		return
      const res = await selCountUserCollect();
      console.log(res, "收藏");
      if (res.code === 0) {
        this.headerNumber[0].num = res.data || 0;
      }
    },

    //更新用户等级数据
    async userList() {
      if (uni.getStorageSync("token")) {
        const res = await getUserByIdApi();
        if (res.code === 0) {
          this.userInfoServer = res.data;
          uni.setStorageSync("userInfoServer", res.data);
          //关闭加载动画
          uni.stopPullDownRefresh();
          uni.hideLoading();
        }
      } else {
        //关闭加载动画
        uni.stopPullDownRefresh();
        uni.hideLoading();
        //第一次进入弹窗
        // this.$refs.authRef.showToggle();
      }
    },

    //跳转个人资料
    head_login() {
      if (!uni.getStorageSync("userId")) {
        //第一次进入弹窗
        // this.$refs.authRef.showToggle();
        uni.navigateTo({
          url: "/pages/empower/mp-weixin",
        });
        return;
      }
      // uni.navigateTo({
      //   url: `/pages/subpackage/personalData/index`,
      // });
    },
    navito(e) {
		console.log(e)
		// chiak去掉
		return
      window.location.href = "https://" + e;
    },
    functionWrapper(item) {
      console.log(item, "item");
      // if (item.text === "消息中心") {
      //   return;
      // }
      uni.navigateTo({
        url: item.url,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.user_ {
  .header_wrapper {
    position: relative;
    > image {
      width: rpx(375);
      height: rpx(211);
      vertical-align: middle;
    }
    > .header_info_ {
      position: absolute;
      top: rpx(24);
      //left: rpx(16);
      left: 0;
      right: 0;
      bottom: 0;
      > .header_top_ {
        display: flex;
        align-items: center;
        margin-left: rpx(16);
        > .img_ {
          margin-right: rpx(8);
          border-radius: 50%;
          width: rpx(43);
          height: rpx(43);
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #ffffff;
          > image {
            width: rpx(43);
            height: rpx(43);
            border-radius: 50%;
            vertical-align: middle;
          }
        }
        > .header_name {
          display: flex;
          flex-direction: column;
          margin-top: rpx(2);
          > .name_ {
            font-size: rpx(15);
            font-weight: bold;
            color: #ffffff;
            display: flex;
            align-items: center;
            > .nickname_ {
              font-size: rpx(15);
              font-weight: bold;
              color: #353535;
              margin-right: rpx(14);
            }
            > .grade_ {
              background: #f1dcbb;
              border-radius: rpx(9);
              display: flex;
              align-items: center;
              padding: rpx(4) rpx(6) rpx(4) rpx(6);
			  color: #6a6a6a;
              > image {
                margin-right: rpx(2);
                width: rpx(29);
                height: rpx(18);
                vertical-align: middle;
                margin-left: rpx(-8);
              }
              > text {
                font-size: rpx(11);
                font-weight: 400;
                color: #353535;
              }
            }
          }
          > .grade_wrapper {
            display: flex;
            margin-top: rpx(4);
            > .id_ {
              font-size: rpx(11);
              font-weight: 400;
              color: #353535;
            }
          }
        }
      }
      > .header_number_ {
        margin-top: rpx(32);
        display: flex;
        padding: rpx(0) rpx(40);
        justify-content: space-between;
        > .item_ {
          display: flex;
          flex-direction: column;
          align-items: center;
          > view {
            margin-bottom: rpx(2);
            font-size: rpx(20);
            font-weight: 500;
            color: #ffffff;
            text-shadow: rpx(0) rpx(1) rpx(0) rgba(0, 0, 0, 0.25);
          }
          > text {
            font-size: rpx(13);
            font-weight: 400;
            color: #ffbfbf;
          }
        }
      }
    }
  }
}

.content_wrapper {
  width: rpx(375);
  min-height: rpx(544);
  background: #ffffff;
  border-top-left-radius: rpx(15);
  border-top-right-radius: rpx(20);
  margin-top: rpx(-30);
  position: relative;
}

.order-wrapper {
  padding: rpx(16) rpx(12);
  position: relative;
  z-index: 11;

  .order-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: rpx(16);

    .left {
      font-size: rpx(17);
      font-weight: bold;
      color: #353535;
    }

    .right {
      font-size: rpx(13);
      font-weight: 400;
      color: #b2b2b2;
      display: flex;
      align-items: center;

      .icon-xiangyou {
        margin-left: rpx(4);
        font-size: rpx(12);
      }
    }
  }

  .order-bd {
    display: flex;
    justify-content: space-between;
    padding: 0 rpx(20);

    .order-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .pic {
        position: relative;
        text-align: center;
        margin-bottom: rpx(6);

        image {
          width: rpx(24);
          height: rpx(24);
          vertical-align: middle;
        }

        .order-status-num {
          min-width: rpx(6);
          background-color: #fff;
          color: #ee5a52;
          border-radius: 15px;
          position: absolute;
          right: -14rpx;
          top: -15rpx;
          font-size: rpx(10);
          padding: 0 rpx(4);
          border: rpx(1) solid #ee5a52;
        }
      }

      .txt {
        font-size: rpx(12);
        font-weight: 400;
        color: #353535;
      }
    }
  }
}

.slider-wrapper {
  margin: rpx(12) rpx(12);
  height: rpx(72);
  border-radius: rpx(36);
  overflow: hidden;

  swiper,
  swiper-item {
    height: 100%;
  }

  image {
    width: 100%;
    height: 100%;
  }
}

.function_ {
  margin: rpx(28) rpx(0);
  > .title_ {
    font-size: rpx(17);
    font-weight: bold;
    color: #353535;
    margin-bottom: rpx(16);
    padding: rpx(0) rpx(12);
  }
  > .function_wrapper {
    display: flex;
    //padding: rpx(0) rpx(12);
    flex-wrap: wrap;
    > .item_ {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: rpx(24);
      > image {
        width: rpx(24);
        height: rpx(24);
        vertical-align: middle;
        margin-bottom: rpx(6);
      }
      > text {
        font-size: rpx(12);
        font-weight: 400;
        color: #353535;
      }
    }
  }
}
.outlogin{
	// color: #000;
	// background-color: sandybrown;
}
</style>
